<template>
    <div class="application-container">
        <header>
            <div class="left">
                <i v-if="showHome" @click="$router.push('/home')"></i>
                <i class="back" v-if="showBack" @click="$router.go(-1)"></i>
            </div>
            <div class="center">
                {{title}}
            </div>
            <div class="right">
                <i class="new" @click="$emit('newEvent')" v-if="showNew"></i>
            </div>
        </header>
        <main>
            <slot/>
        </main>
    </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: false
    },
    showHome: {
      type: Boolean,
      default: false
    },
    showBack: {
      type: Boolean,
      default: false
    },
    showNew: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    // btnEvt () {
    //   this.$emit('newEvent')
    // }
  }
}
</script>
